<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column h3")
            div(class="flex-column-item flex-row under-line") 
                div(class="flex-row-item flex-center-center") --高级设置--
                div(class="flex-row-item", style="flex:0") {{activeId+1}}/{{menus.length}}
            div(class="flex-column-item flex-row" v-for="menu in currentPageMenus",
            :class="{'selected-text': menu.id == activeId ? true: false}")
                div(class="flex-row-item flex-2") {{menu.name}}
                div(class="flex-row-item center") >>>
        control-password(:visible="visible",ref="controlPsw",@submit="submit")
        control-dialog(:visible="dialogVisible", title="密码错误！！", sub-title="按任意键返回", ref="dialog")
</template>

<script>
import MenuList from "@/mixins/MenuList";

export default {
  mixins: [MenuList],
  data() {
    return {
      page: { maxResultCount: 3, skipCount: 0 },
      visible: false,
      dialogVisible: false
    };
  },
  computed: {
    menus() {
      const menus = [
        { name: "1.菜单设置", id: 0, to: "menu" },
        { name: "2.输注设置", id: 1, to: "influsion" },
        { name: "3.医生设置", id: 2, to: "doctor1" },
      ];
      return menus;
    },
    currentPageMenus() {
      var start = this.skipCount;
      var end = this.skipCount + this.page.maxResultCount;
      return this.menus.slice(start, end);
    }
  },
  methods: {
    up() {
      if (this.visible) {
        this.$refs.controlPsw.up();
        return;
      }

      if (this.activeId == 0) {
        this.activeId = this.menus[this.menus.length - 1].id;
      } else {
        this.activeId = this.activeId - 1;
      }
    },
    down() {
      if (this.visible) {
        this.$refs.controlPsw.down();
        return;
      }

      if (this.activeId == this.menus[this.menus.length - 1].id) {
        this.activeId = 0;
      } else {
        this.activeId = this.activeId + 1;
      }
    },

    back() {
      if(this.dialogVisible){
          this.dialogVisible = false;
          return;
      }
      if (this.visible) {
        this.visible = !this.visible;
        this.$refs.controlPsw.resetPosition();

      } else {
        this.$router.push("/menu?index=5");
      }
    },
    yes() {
      if (this.visible) {
        this.$refs.controlPsw.yes();
        return;
      }
      if(this.dialogVisible){
          this.dialogVisible = false;
          return;
      }
      if (this.activeId == 2) {
        this.visible = true;
        return;
      }

      var active = this.menus.find(menu => {
        return menu.id == this.activeId;
      });
      if (active.showModal) {
        this.visible = true;
      } else {
        this.$router.push(active.to);
      }
    },
    submit(password){
      if(password == "1234") this.$router.push('doctor1')
      else if(password == "5678") this.$router.push('doctor2')
      else{
          this.dialogVisible = true;
          this.visible = false;
          this.$refs.controlPsw.resetPosition();
      }
    }
  }
};
</script>

<style lang="less">
</style>
